<template>
    <div id="exhibition-plan" class="container">
        <div class="plan-left">
            <div class="plan-left-title">
                <div
                    class="title-text"
                    :class="{title_text_active:planTableActive==0}"
                    @click="planTableActive=0"
                >2018年展览计划</div>
                <div
                    class="title-text"
                    :class="{title_text_active:planTableActive==1}"
                    @click="planTableActive=1"
                >往年展览计划</div>
                <span class="el-icon-search plan-search"></span>
            </div>
            <el-table :data="dataSource" v-loading="loading" style="width: 100%">
                <el-table-column
                    prop="exName"
                    label="展会名称"
                    header-align="center"
                    label-class-name="plan-table-header"
                >   
                    <template slot-scope="record">
                        <router-link to="/" class="ex-name">{{record.row.exName}}</router-link>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="exTime"
                    label="展会时间"
                    width="100"
                    header-align="center"
                    class-name="ex-grey-text"
                    label-class-name="plan-table-header"
                ></el-table-column>
                <el-table-column
                    prop="exCity"
                    label="城市"
                    width="100"
                    header-align="center"
                    class-name="ex-grey-text"
                    label-class-name="plan-table-header"
                ></el-table-column>
                <el-table-column
                    prop="exIndusty"
                    label="所属行业"
                    width="160"
                    header-align="center"
                    class-name="ex-grey-text"
                    label-class-name="plan-table-header"
                ></el-table-column>
                <el-table-column
                    prop="exContact"
                    label="联系方式"
                    width="120"
                    header-align="center"
                    class-name="ex-grey-text"
                    label-class-name="plan-table-header"
                ></el-table-column>
            </el-table>
            <el-pagination
                background
                layout="total,prev, pager, next"
                :total="1000"
                class="plan-pagination-box"
            ></el-pagination>
        </div>
        <div class="plan-right">
            <div>
                <div class="plan-right-title">未开展会</div>
                <div class="plan-right-con-list" v-for="(index) in 6" :key="'no-open'+index">
                    <div>国家会展中心</div>
                    <div>上海</div>
                </div>
            </div>
            <div class="plan-right-two">
                <div class="plan-right-title">最新服务商</div>
                <div class="plan-right-two-con" v-for="(index) in 6" :key="'newest'+index">
                    <div>重庆宜轩展览有限公司</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "exhibitionPlan",
    components: {},
    data() {
        return {
            planTableActive: 0, //选中的表格
            loading: true, //表格加载状态
            dataSource: [
                //表格数据
                {
                    exName: "2018首届中国国际进出口博览会",
                    exTime: "2018-12-06",
                    exCity: "宜宾市",
                    exIndusty: "加工，贸易，进出口",
                    exContact: "400-613-5858"
                },
                {
                    exName: "2018商务部(第三届)新能源汽车全产业链展",
                    exTime: "2018-12-06",
                    exCity: "宜宾市",
                    exIndusty: "加工，贸易，进出口",
                    exContact: "400-613-5858"
                },
                {
                    exName: "2018中国国际针织（秋冬）博览会（PH Value）",
                    exTime: "2018-12-06",
                    exCity: "宜宾市",
                    exIndusty: "加工，贸易，进出口",
                    exContact: "400-613-5858"
                },
                {
                    exName: "2018中国国际五金展/上海科隆五金展",
                    exTime: "2018-12-06",
                    exCity: "宜宾市",
                    exIndusty: "加工，贸易，进出口",
                    exContact: "400-613-5858"
                },
                {
                    exName: "2018中国国际针织（秋冬）博览会（PH Value）",
                    exTime: "2018-12-06",
                    exCity: "宜宾市",
                    exIndusty: "加工，贸易，进出口",
                    exContact: "400-613-5858"
                },
                {
                    exName: "2018中国国际针织（秋冬）博览会（PH Value）",
                    exTime: "2018-12-06",
                    exCity: "宜宾市",
                    exIndusty: "加工，贸易，进出口",
                    exContact: "400-613-5858"
                },
                {
                    exName: "2018中国国际针织（秋冬）博览会（PH Value）",
                    exTime: "2018-12-06",
                    exCity: "宜宾市",
                    exIndusty: "加工，贸易，进出口",
                    exContact: "400-613-5858"
                },
                {
                    exName: "2018中国国际针织（秋冬）博览会（PH Value）",
                    exTime: "2018-12-06",
                    exCity: "宜宾市",
                    exIndusty: "加工，贸易，进出口",
                    exContact: "400-613-5858"
                },
                {
                    exName: "2018中国国际针织（秋冬）博览会（PH Value）",
                    exTime: "2018-12-06",
                    exCity: "宜宾市",
                    exIndusty: "加工，贸易，进出口",
                    exContact: "400-613-5858"
                },
                {
                    exName: "2018中国国际针织（秋冬）博览会（PH Value）",
                    exTime: "2018-12-06",
                    exCity: "宜宾市",
                    exIndusty: "加工，贸易，进出口",
                    exContact: "400-613-5858"
                }
            ]
        };
    },
    mounted() {
        this.loading = false;
    },
    // watch: {
    //     planTableActive(oldVal, newVal) {}
    // },
    methods: {
        /*
         * 切换列表，重新请求，赋值，渲染
         */
        // changeTableNav(state) {
        //     // state === 0 ? console.log("列表一") : console.log("列表二");
        // }
    }
};
</script>
<style lang="scss">
#exhibition-plan {
    display: flex;
    margin-top: 58px;
    .plan-left {
        width: 898px;
        .plan-left-title {
            text-align: left;
            border-bottom: 1.5px solid #c81622;
            .title-text {
                display: inline-block;
                width: 163px;
                height: 38px;
                margin-left: 21px;
                line-height: 38px;
                text-align: center;
                font-size: 20px;
                color: #c81622;
                background-color: #fff;
                cursor: pointer;

                &:hover {
                    background-color: #c81622;
                    opacity: 0.8;
                    color: #fff;
                }
            }
            .title_text_active {
                color: #fff;
                background-color: #c81622;
            }
            .plan-search {
                color: #a8a8a8;
                font-size: 21px;
            }
        }
        // 表格标题栏样式
        .plan-table-header {
            font-size: 18px;
            color: #040000;
            font-weight: 500;
            &:hover .cell {
                color: #040000 !important;
                border-bottom: 0 !important;
            }
        }
        //表格第一 列样式
        .ex-name {
            color: #010000;
            font-size: 15px;
            &:hover{
                color: #c81622;
                border-bottom: 1px solid #c81622;
            }
        }
        //表格除第一外的列样式
        .ex-grey-text {
            color: #848484;
            font-size: 15px;
        }

        .plan-pagination-box {
            margin: 19px 0 37px;
            text-align: left;
            &.is-background .el-pager li:not(.disabled).active {
                background-color: #ca1620;
            }
        }
    }
    .plan-right {
        flex: auto;
        margin: 11px 0 0 22px;
        text-align: left;
        .plan-right-title {
            height: 27px;
            line-height: 27px;
            padding-left: 6px;
            border-bottom: 1px solid #848484;
            border-left: 3px solid #c81622;
            color: #c81622;
            font-size: 15px;
        }
        .plan-right-con-list {
            display: flex;
            justify-content: space-between;
            line-height: 36px;
            color: #848484;
            font-size: 12px;
        }
        .plan-right-two {
            margin-top: 6px;

            .plan-right-two-con {
                line-height: 36px;
                color: #848484;
                font-size: 12px;
            }
        }
    }
}
</style>



